<template>
    <ul class="list">
        <li class="item"
            v-for="(item,index) of letters"
            :key="item.name"
            @click="handleLetterClick"
            @touchstart.prevent="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            :ref="item.name"
            :class="{hover:item.isHover}"
        >{{item.name}}</li>
    </ul>
</template>

<script>
    export default {
        name: "Alphabet",
        props:{
            cities:Object,
            city_wrap_height:Number
        },
        created () {

        },
        mounted () {

        },
        updated () {

        },
        computed:{
          letters :{
                set (value) {
                },
                get () {
                    var that=this;
                  let letters=[];
                  for(let i in this.cities){
                      if(i=='A'){
                          that.cities[i].isHover=true
                          letters.push({
                              'name':i,
                              'isHover':true
                          })
                      }else{
                          that.cities[i].isHover=false
                          letters.push({
                              'name':i,
                              'isHover':false
                          })
                      }
                  }
                    // console.log(this.cities)
                  return letters;
                  // ['A','B','C ']
                }
            }

        },
        data () {
          return {
              touchStatus:false,
              startY:0,
              // 节流
              timer:null
          }
        },
         // 数据在更新，页面在完成渲染后，updated钩子会执行
        updated () {
            this.startY=this.$refs['A'][0].offsetTop;
        },
        methods:{
            // 当你触发某个事件 时候，事件会接受到一个E的事件对象
            handleLetterClick (e) {
                // 这里可以获取到 点击的内容
                // 我们要把这个内容 传递给list  做一个兄弟间的传值
                // 方式一 总线
                // 先把值 传给 city组件，在让city组件转发给list
                // console.log(e.target.innerHTML)
                this.$emit('change',{
                    'name':e.target.innerHTML
                });
            },
            handleTouchStart () {
                this.touchStatus=true
            },
            handleTouchMove (e) {
                if(this.touchStatus){
                    if(this.timer){
                        clearTimeout(this.timer)
                    }
                    this.timer=setTimeout(() => {
                        // const startY=this.$refs['A'][0].offsetTop;
                        const item_height=this.$refs['A'][0].clientHeight;
                        // console.log(startY)
                        const touchY=e.touches[0].clientY - this.city_wrap_height;
                        // console.log(touchY)
                        const index=Math.floor((touchY-this.startY)/item_height);
                        const clientE=this.letters[index];
                        // console.log(clientE)
                        if(index>=0&&index<this.letters.length){
                            this.$emit('change',clientE);
                        }
                        // 自己写的可以不考虑
                        const arr2=this.letters;
                        for(var i=0;i<arr2.length;i++){
                            arr2[i].isHover=false;
                            arr2[index].isHover=true;
                        }
                        this.letters=arr2;
                        // console.log( this.letters)
                    },16)



                }
            },
            handleTouchEnd () {
                this.touchStatus=false
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~styles/variables.styl"
.list
    position: absolute
    right:0
    top:1.58rem
    bottom:0
    width: 0.4rem
    display: flex
    flex-direction column
    justify-content center
.item
    line-height:.4rem
    text-align center
    color: $bgcolor
.hover
    color: red
</style>